<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组操作</title>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>

<button id="to-array-btn" type="button">toArray()</button>
<br/>
<button id="comm-each-btn" type="button">$.each()</button>
<br/>
<button id="element-each-btn" type="button">o.each()</button>
<br/>
<button id="extends-btn" type="button">$.extends()</button>
<br/>
<button id="merge-btn" type="button">$.merge()</button>
<br/>
<button id="grep-btn" type="button">$.grep()</button>
<br/>
<button id="map-btn" type="button">$.map()</button>
<br/>
<button id="unique-btn" type="button">$.unique()</button>
<br/>
<button id="in-array-btn" type="button">$.inArray()</button>
<br/>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        let divs = $("div");

        $("#to-array-btn")[0].onclick = () => {
            console.log($.type(divs));
            console.log($.type(divs.toArray()));
        };

        $("#comm-each-btn")[0].onclick = () => {
            $.each(divs, (i, v) => {
                if (i === 3) {
                    return false;
                }
                console.log(i, v);
            });

            let array = [5, 6, 7];
            $.each(array, (i, v) => {
                console.log(i, v);
            });

            let json = {"name": "jack", "age": 18};
            $.each(json, (k, v) => {
                console.log(k, v);
            });
        };

        $("#element-each-btn")[0].onclick = () => {
            divs.each((i, v) => {
                if (i === 3) {
                    return false;
                }
                console.log(i, v);
            });
        };

        $("#extends-btn")[0].onclick = () => {

            let arr = [1, 2, 3];
            let arr1 = [4];
            let arr2 = [3, true];
            let arrResult = $.extend(arr, arr1, arr2);
            console.log("arr:", arr);
            console.log("arr1:", arr1);
            console.log("arr2:", arr2);
            console.log("arrResult:", arrResult);

            let json = {a: 1, b: 2};
            let json1 = {c: 3};
            let json2 = {a: 4, b: 5};
            let jsonResult = $.extend(json, json1, json2);
            console.log("json:", json);
            console.log("json1:", json1);
            console.log("json2:", json2);
            console.log("jsonResult:", jsonResult);
        };

        $("#merge-btn")[0].onclick = () => {
            let arr = [1, 3, 5];
            let arr1 = [3, 5, 7];
            let arrResult = $.merge(arr, arr1);
            console.log("arr:", arr);
            console.log("arr1:", arr1);
            console.log("arrResult:", arrResult);
        };

        $("#grep-btn")[0].onclick = () => {
            let arr = [1, 2, 3, 4, 5];
            let arrResultA = $.grep(arr, (v, i) => v > 2, true);
            let arrResultB = $.grep(arr, (v, i) => v > 2, false);
            console.log(arr);
            console.log(arrResultA);
            console.log(arrResultB);
        };

        $("#map-btn")[0].onclick = () => {
            let arr = [1, 2, 3];
            let arrResult = $.map(arr, (v, i) => v * 2);
            console.log(arr);
            console.log(arrResult);
        };

        $("#unique-btn")[0].onclick = () => {
            let arr = [1, 1, 1, 3, 3, 3, 4];
            let arrResult = $.unique(arr);
            console.log(arr);
            console.log(arrResult);
        };

        $("#in-array-btn")[0].onclick = () => {
            let arr = [1, 1, 1, 3, 3, 3, 4];
            let result1 = $.inArray(3, arr);
            let result2 = $.inArray(5, arr);
            console.log(result1);
            console.log(result2);
        };
    });
</script>
</body>
</html>